<template>
  <div class="teacherHomepage">
      <!-- close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true -->
      <!-- show-close	是否显示关闭按钮	boolean	—	true -->
      <!-- close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	true -->
      <el-dialog
        title="提交信息"
        :visible.sync="dialogTableVisible"
        :show-close="false"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form
          :model="ruleForminfo"
          status-icon
          :rules="rulesinfo"
          ref="ruleForminfo"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              type="text"
              v-model="ruleForminfo.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="学校" prop="school">
            <el-select
              placeholder="请选择学校"
              v-model="ruleForminfo.school"
              style="width: 100%"
            >
              <el-option label="请选择学校" value=""> </el-option>

              <el-option
                :label="item.school"
                :value="item.school"
                v-for="(item, index) in selectSchool"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="院系" prop="faculty">
            <el-select
              placeholder="请选择院系"
              v-model="ruleForminfo.faculty"
              style="width: 100%"
            >
              <el-option label="请选择院系" value=""> </el-option>

              <el-option
                :label="item.faculty"
                :value="item.faculty"
                v-for="(item, index) in selectFaculty"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="教师号" prop="teacherid">
            <el-input v-model.number="ruleForminfo.teacherid"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForminfo')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForminfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    
    
    <div class="exam-notice" v-show="teacherInfomation">
    <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h2>功能提示</h2>
    </div>
    <div class="text">
      <p>一、试卷管理，出卷，查询试卷，阅卷</p>
      <p>二、考试管理，发布考试,查询已发布的考试</p>
      <p>三、班级管理，可查看，增加，修改，删除班级</p>
      <p>四、学生管理，查询学生信息，查询学生考试信息</p>
    </div>
  </el-card>
  </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import { Message,MessageBox } from "element-ui";
export default {
  watch: {
    "ruleForminfo.school": {
      deep: true,
      handler(val, oldval) {
        //获取院系
        axios
          .get(`/v1/teachers/schoolinfo/${val}`)
          .then((res) => {
            // console.log(res.data);
            this.selectFaculty = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      },
    },
  },
  mounted() {
    this.getTeacherInfomation();
    this.getSchool();
  },
  methods: {
    //获取教师信息
    getSchool() {
      axios
        .get("/v1/teachers/schoolinfo")
        .then((res) => {
          if (res.data.status == 200) {
            //   console.log(res.data);
            this.selectSchool = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //获取教师信息
    getTeacherInfomation() {
      axios
        .get("/v1/teachers/teacherinfomation")
        .then((res) => {
          if (res.data.status == 200) {
            this.teacherInfomation = true;
            this.dialogTableVisible=false;//如果教师信息存在则不显示
            localStorage.teacherInfomation = this.teacherInfomation;
            this.$store.commit("setTeacherInfomation",this.teacherInfomation );
          } else {
            this.teacherInfomation = false;
            localStorage.teacherInfomation = this.teacherInfomation;
            this.$store.commit("setTeacherInfomation",this.teacherInfomation );
            this.dialogTableVisible=true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //提交教师信息
    submitTeacherInfomation() {
      axios({
        method: "post",
        url: "/v1/teachers/teacherinfomation",
        data: qs.stringify({
          name: this.ruleForminfo.name,
          school:this.ruleForminfo.school,
          faculty:this.ruleForminfo.faculty,
          teacherid: this.ruleForminfo.teacherid,
        }),
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
        },
      })
        .then((result) => {
          if (result.data.status == 200) {
            Message.success({
              showClose: true,
              message: "提交成功",
              type: "success",
            });
            //更新数据
            this.getTeacherInfomation();
          } else {
            Message.error({
              showClose: true,
              message: "提交失败",
              type: "error",
            });
          }
        })
        .catch((err) => {
          MessageBox("服务器开小差了~请稍后再试", "提示", {
            confirmButtonText: "确定",
            type: "error",
          });
          console.log(err);
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitTeacherInfomation();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("姓名不能为空"));
      } else {
        callback();
      }
    };
    var validateSchool = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("学校不能为空"));
      } else {
        callback();
      }
    };
    var validateFaculty = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("院系不能为空"));
      } else {
        callback();
      }
    };
    var validateTeacherid = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入教师号"));
      } else {
        callback();
      }
    };
    return {
      selectSchool: [""],
      selectFaculty: [""],
      teacherInfomation: false,
      dialogTableVisible: false,
      ruleForminfo: {
        name: "",
        school: "",
        faculty: "",
        teacherid: "",
      },
      rulesinfo: {
        name: [{ validator: validateName, trigger: "blur" }],
        school: [{ validator: validateSchool, trigger: "change" }],
        faculty: [{ validator: validateFaculty, trigger: "change" }],
        teacherid: [{ validator: validateTeacherid, trigger: "blur" }],
      },
    };
  },
};
</script>
<style lang="scss">
.teacherHomepage {
  margin: 0 auto;
  margin-top: 50px;
}
</style>